<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
</head>
<body>
    


    <script>

class MyEvent{
        constructor(){
            this.handle = {}
        }
        // 添加
        addEvent(eventName,fn){
            // 判断有没有这个方法
            if(typeof this.handle[eventName] === 'undefined'){
                this.handle[eventName] = []
            }
            // 将方法添加进去
            this.handle[eventName].psuh(fn)
        }
        // 删除
        removeEvent(eventName,fn){
            // 是否有这个方法
            if(!(eventName in this.handle)){
                return
            }
            // 循环查找这个函数
            for(let i = 0;i< this.handle[eventName].length;i++){
                if(this.handle[eventName][i] === fn){
                    this.handle[eventName].splice(i,1);
                    //因为就有一个所以 删除完成后就可以结束了
                    break;
                }
            }
        }
        // 执行
        trigger(eventName){
            // 是否有这个方法
            if(!(eventName in handle)){
                return
            }
            // 将这个方法内的其他方法拿出来执行
            handle[eventName].forEach(element => {
                element()
            });
        }

    }



        // 封装js
        class Dailog{
            constructor(options){
                //合并配置
                // let {width,title} = options;
                this.opts = Object.assign({
                    width:"30%",
                    height:'250px',
                    title:'测试标题',
                    content:"测试内容",
                    drageble:true,
                    maskable:true,
                    isCancel:false,
                },options)
                this.init()
            }
            // 初始化
            init(){
                this.renderView()

            }
            // 显示
            open(){

            }
            //关闭
            close(){

            }
            // 渲染html
            renderView(){

            }
        }




        // 调用
        let dailog1 = new Dailog({
            width:"30%",
            title:"测试标题1"
        })



    </script>
</body>
</html>